<template>
  <div>
    <section class="header clearfix">
      <span>员工列表</span>
      <span class="iconfont iconadd1" @click="addEmployee()"> 添加</span>
    </section>
    <div class="opt-t">
      <div :class="[personType == '0' ? 'active' : '']" @click="isClick(0)">
        <div class="number">{{ inJobNum }}</div>
        <div>在职员工</div>
      </div>
      <div :class="[personType == '1' ? 'active' : '']" @click="isClick(1)">
        <div class="number">{{ outJobNum }}</div>
        <div>离职员工</div>
      </div>
      <div :class="[personType == '2' ? 'active' : '']" @click="isClick(2)">
        <div class="number">{{ curMonthInJobNum }}</div>
        <div>本月入职</div>
      </div>
      <div :class="[personType == '3' ? 'active' : '']" @click="isClick(3)">
        <div class="number">{{ curMonthOutJobNum }}</div>
        <div>本月离职</div>
      </div>
    </div>
    <div class="search-box" @keyup.enter="searchFun">
      <i class="iconfont iconsearch1"></i>
      <el-input
        placeholder="输入员工姓名进行搜索"
        class="search"
        v-model.trim="fullName"
      ></el-input>
      <div class="btn">
        <el-button type="primary" size="mini" @click="stopPaymentBulk()">
          批量停缴
        </el-button>
        <el-button type="success" size="mini" @click="getPlatform()">
          导入
        </el-button>
        <!-- <el-button type="primary" :disabled="disposeArr.length <= 0">
          <download-excel
            class="export-excel-wrapper"
            :data="excelData"
            header="这是个excel的头部"
            name="员工列表.xls"
          >
            导出
          </download-excel>
        </el-button> -->
        <el-button
          type="primary"
          size="mini"
          :loading="outInutLoading"
          @click="exportExcel()"
          >导出</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="dismissal()"
          title="请选择员工"
          v-if="personType == '0' || personType == '2'"
          :disabled="disposeArr.length <= 0"
          :loading="dimissionLoading"
        >
          离职
        </el-button>
      </div>
    </div>

    <div class="search-box">
      <section class="option">
        <span>性别:</span>
        <el-select v-model="sex" @change="searchFun" placeholder="请选择">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </section>
      <section class="option">
        <span>缴纳城市:</span>
        <el-select
          v-model="areaCode"
          @change="searchFun"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in addressOptions"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          >
          </el-option>
        </el-select>
      </section>
      <section class="option">
        <span>时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          @change="searchFun"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </section>
      <section class="option">
        <span>审核状态:</span>
        <el-select
          v-model="auditStatus"
          @change="searchFun"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in auditStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </section>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="platformName"
          label="参保单位"
          fixed
          width="80"
        ></el-table-column>
        <el-table-column prop="fullName"           width="80" label="姓名" fixed></el-table-column>
        <el-table-column prop="idCard" fixed label="身份证号" width="190"> </el-table-column>
        <el-table-column
          label="审核状态"
          prop="auditStatus"
          fixed
              width="80"
          :formatter="auditStatusFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
           width="50"
          :formatter="sexFilter"
        ></el-table-column>
        <el-table-column
          prop="socialSecurityDate"
          label="社保参保时间"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="socialSecurityBasic"
          label="社保缴费基数"
      width="80"
        ></el-table-column>
        <el-table-column
          prop="isPayFund"
          label="是否有公积金"
    width="80"
          :formatter="isPayFundFormatter"
        ></el-table-column>
        <el-table-column
          prop="fundDate"
          label="公积金参保时间"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="fundBasic"
          label="公积金基数"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="areaCode"
          label="缴纳城市"
              width="80"
          :formatter="areaCodeFormatter"
        ></el-table-column>
        <el-table-column
          prop="censusRegisterType"
          label="户籍性质"
              width="110"
        ></el-table-column>
        <el-table-column prop="phone"  width="120" label="手机号码"></el-table-column>

        <el-table-column
          prop="jobStatus"
          label="员工状态"
          :formatter="typeFilter"
                 width="80"
        ></el-table-column>

        <el-table-column label="审核不通过原因" width="100">
          <template slot-scope="scope">
          {{scope.row.auditStatus=="2"?(scope.row.auditResult && JSON.parse(scope.row.auditResult)[JSON.parse(scope.row.auditResult).length-1].remark):"-"}}

            <el-button
              size="mini"
              type="text"
              v-if="scope.row.auditStatus == '2'"
              @click="
                look(
                  scope.row.auditStatus,
                  scope.row.personId,
                  scope.row.mappingId,
                  scope.row.auditResult
                )
              "
              >重新提交</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="jobFirstTime"
          label="入职日期"
          :formatter="dateFilter"
             width="110"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.jobStatus == 3"
              @click="getUserProject(scope.row.personId,scope.row.baseInfo)"
              >补缴</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="
                scope.row.auditStatus == '0' || scope.row.jobStatus == '3'
              "
              @click="suspensionPayment(scope.row.personId)"
              >停缴</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="viewOrder(scope.row.personId)"
              >订单</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="
                look(
                  scope.row.auditStatus,
                  scope.row.personId,
                  scope.row.mappingId,
                  scope.row.auditResult
                )
              "
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6, 12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!--项目框-->
    <el-drawer
      title="缴纳项目"
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
    >
      <el-table
        :data="projectList"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="isLoading"
      >
        <el-table-column prop="paymentName" label="缴纳项目"></el-table-column>
        <el-table-column
          prop="paymentType"
          label="缴纳类型"
          :formatter="typeFormatter"
        ></el-table-column>
        <el-table-column prop="basic" label="基数"></el-table-column>
        <el-table-column prop="defaultVal" label="默认值"></el-table-column>
        <el-table-column
          prop="companyVal"
          label="公司份额"
          :formatter="valueFormatter"
        ></el-table-column>
        <el-table-column
          prop="personVal"
          label="个人份额"
          :formatter="valueFormatter"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="open(scope.row.mappingPaymentId)"
              >补缴</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!--选择补缴日期-->
    <el-dialog
      title="补缴"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form>
        <el-form-item label="时间">
          <el-date-picker
            v-model="supplementaryDate"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="金额">
          <el-input
            placeholder="输入金额"
            class="search"
            v-model.trim="amount"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            placeholder="输入备注"
            class="search"
            v-model.trim="remarks"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirmMonth">确 定</el-button>
      </div>
    </el-dialog>
    <!--选择缴纳平台-->
    <el-dialog
      title="选择缴纳平台"
      :visible.sync="dialogPlatformId"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form>
        <el-form-item label="平台" :label-width="formLabelWidth" required>
          <el-select v-model="pId" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.platformId"
              :label="item.platformName"
              :value="item.platformId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPlatformId = false">取 消</el-button>
        <el-button type="primary" @click="comfirmPlatform">确 定</el-button>
      </div>
    </el-dialog>
    <!--停缴-->
    <el-dialog
      title="停缴"
      width="600px"
      :visible.sync="dialogSuspensionPayment"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="stopForm" label-width="80px">
        <el-form-item label="类型" required>
          <el-checkbox-group v-model="stopForm.paymentType">
            <el-checkbox label="1">社保</el-checkbox>
            <el-checkbox label="2">公积金</el-checkbox>
            <el-checkbox label="0">医保</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="原因">
          <el-input
            type="textarea"
            resize="none"
            placeholder="输入原因"
            v-model.trim="stopForm.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogSuspensionPayment = false;
            suspensionPaymentLoading = false;
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          :loading="suspensionPaymentLoading"
          @click="comfirmStop"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost, requestApiExportPerson } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
import JsonExcel from "vue-json-excel";
export default {
  name: "employeeList",
  data() {
    return {
      outInutLoading: false,
      loading: false,
      isLoading: false,
      drawer: false,
      dimissionLoading: false,
      dialogFormVisible: false,
      formLabelWidth: "160px",
      time: [],
      pId: "",
      projectList: [],
      inJobNum: "0",
      outJobNum: "0",
      curMonthInJobNum: "0",
      curMonthOutJobNum: "0",
      notExportNum: "0",
      isSelect: false,
      areaCode: "",
      personType: "0", //员工类型 0在职员工；1离职员工；2本月入职；3本月离职
      fullName: "",
      sex: "",
      sexOptions: [
        { label: "全部", value: "" },
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      auditStatus: "",
      auditStatusOptions: [
        { label: "未审核", value: "0" },
        { label: "已审核", value: "1" },
        { label: "审核不通过", value: "2" },
      ],
      addressOptions: [],
      tableData: [],
      multipleSelection: [],
      current: 1,
      pageSize: 6,
      total: null,
      excelData: [],
      disposeArr: [],
      supplementaryDate: "",
      amount: "",
      remarks: "",
      dialogPlatformId: false,
      platformOptions: [],
      stopForm: {
        paymentType: [],
      },
      dialogSuspensionPayment: false,
      suspensionPaymentLoading: false,
    };
  },
  methods: {
    /**接口导出 */
    exportExcel() {
      this.outInutLoading = true;
      var reqData = {
        companyName: JSON.parse(sessionStorage.getItem("login")).userName,
        companyId: this.$route.query.companyId,
      };

      let url = requestApiExportPerson(reqData);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载完成移除元素
      window.URL.revokeObjectURL(url); // 释放掉blob对象
      this.outInutLoading = false;
    },
    //获取员工项目列表
    getUserProject(personId,baseInfo) {
      this.projectList = baseInfo;
      this.personId=personId;
      this.drawer = true;
    },
    //批量停缴
    stopPaymentBulk() {
      this.$router.push("/stopPaymentBulk");
    },
    //确认停缴
    comfirmStop() {
      if (!this.stopForm.paymentType.length) {
        this.$message.warning("请选择类型");
        return;
      }
      this.suspensionPaymentLoading = true;
      var reqData = {
        ...this.stopForm,
        paymentType: this.stopForm.paymentType.join(","),
        companyId: this.$route.query.companyId,
      };
      let reqReport = reqRep({
        traCode: "_DEL_PERSON_PAYMENT_V2_2",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.suspensionPaymentLoading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.$message.success("停缴成功");
          this.dialogSuspensionPayment = false;
          this.getData();
        }
      });
    },
    suspensionPayment(personId) {
      this.dialogSuspensionPayment = true;
      this.stopForm = {
        paymentType: [],
      };
      this.$set(this.stopForm, "personId", personId);
    },
    //选择
    open(mappingPaymentId) {
      this.supplementaryDate = "";
      this.amount = "";
      this.remarks = "";
      this.mappingPaymentId = mappingPaymentId;
      this.dialogFormVisible = true;
    },
    //提交补缴
    comfirmMonth() {
      if (!this.supplementaryDate) {
        this.$message.warning("请选择日期");
        return;
      }
      if (!this.amount || this.amount <= 0) {
        this.$message.warning("请输入金额");
        return;
      }
      var reqData = {
        personId: this.personId,//员工id
        supplementaryDate: base.monthSwitch(this.supplementaryDate),
        amount: this.amount,
        remarks: this.remarks,
        mappingPaymentId: this.mappingPaymentId,
      };
      let reqReport = reqRep({
        traCode: "_SUPPLEMENTARY_PAY_ORDER",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.dialogFormVisible = false;
          this.$message.success("补缴成功");
        }
      });
    },
    //确认平台
    comfirmPlatform() {
      if (!this.pId) {
        this.$message.warning("请选择平台");
        return;
      }
      this.$router.push({
        path: "/inputData",
        query: {
          companyId: this.$route.query.companyId,
          platformId: this.pId,
        },
      });
    },
    //获取平台
    getPlatform() {
      var reqData = {
        PName: "",
        areaCode: "",
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_PAY_PLATFORM", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.platformOptions = resReport.data.records;
          this.dialogPlatformId = true;
        }
      });
    },
    //批量离职
    dismissal() {
      let index = this.disposeArr.findIndex((v) => v.jobStatus != "1");
      if (index != -1) {
        this.$message.warning("只有在职员工才能离职");
        return;
      }
      let personIds = this.disposeArr.map((e) => {
        return e.personId.toString();
      });

      if (!Array.isArray(personIds) || personIds.length <= 0) {
        this.$message.warning("请选择要离职的员工");
        return;
      }
      var reqData = {
        personIds: personIds,
        inOrOut: "2", //1入职；2离职；3转正
        companyId: JSON.parse(sessionStorage.getItem("login")).personId,
      };
      let reqReport = reqRep({
        traCode: "_IN_OUT_JOB",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.dialogFormVisible = false;
          this.$message.success("离职成功");
          this.getTab();
          this.getData();
        }
      });
    },
    //添加员工
    addEmployee() {
      this.$router.push({
        path: "/addEmployee",
        query: {
          companyId: JSON.parse(sessionStorage.getItem("login")).personId,
        },
      });
    },
    searchFun() {
      this.current = 1;
      this.getData();
    },
    viewOrder(personId) {
      this.$router.push({
        path: "/billInfoList",
        query: { personId },
      });
    },
    getAddress() {
      var reqData = {
        grade: 1,
        isStart: 0,
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_AREA", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.addressOptions = resReport.data.records;
        }
      });
    },
    isClick(num) {
      this.current = 1;
      this.pageSize = 6;
      this.personType = num.toString();
      this.time = [];
      this.getData();
    },
    //导出新员工
    handleSelectionChange(val) {
      let newArr = JSON.parse(JSON.stringify(val));
      this.disposeArr = newArr;
      this.excelData = newArr.map((e, i) => {
        return {
          参保单位: e.platformName,
          姓名: e.fullName,
          身份证号: "'" + e.idCard,
          户籍性质: e.censusRegisterType,
          手机号码: e.phone,
          社保参保时间: e.socialSecurityDate,
          社保缴费基数: e.socialSecurityBasic,
          是否有公积金: e.isPayFund == 1 ? "是" : "否", //是否缴纳公积金 1是；2否
          公积金参保时间: e.fundDate,
          公积金基数: e.fundBasic,
        };
      });
    },

    handleCurrentChange(e) {
      this.current = e;
      this.getData();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    look(auditStatus, personId, mappingId, auditResult) {
      let auditInfo = {
        auditStatus,
        auditResult,
      };
      sessionStorage.setItem("auditInfo", JSON.stringify(auditInfo));

      this.$router.push({
        path: "/employeesDetail",
        query: {
          companyName: JSON.parse(sessionStorage.getItem("login")).userName,
          personId,
          mappingId,
          auditStatus
        },
      });
    },
    //获取tab
    getTab() {
      var reqData = {
        companyId: JSON.parse(sessionStorage.getItem("login")).personId,
      };
      let reqReport = reqRep({ traCode: "_NUM_PERSON", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.curMonthInJobNum = resReport.data.curMonthInJobNum;
          this.outJobNum = resReport.data.outJobNum;
          this.curMonthOutJobNum = resReport.data.curMonthOutJobNum;
          this.inJobNum = resReport.data.inJobNum;
        }
      });
    },
    //获取列表
    getData() {
      this.loading = true;
      var reqData = {
        ...this.$route.query,
        companyId: JSON.parse(sessionStorage.getItem("login")).personId,
        current: this.current,
        pageSize: this.pageSize,
        fullName: this.fullName,
        sex: this.sex,
        auditStatus: this.auditStatus,
        areaCode: this.areaCode,
        personType: this.personType == "6" ? "2" : this.personType,
        jobFirstTimeStart: this.time && this.time[0] ? this.time[0] : "",
        jobFirstTimeEnd: this.time && this.time[1] ? this.time[1] : "",
      };
      base.saveSearchCriteria(this.$route.path, reqData);
      let reqReport = reqRep({ traCode: "_LIST_PERSON_V2_2", data: reqData });
      requestApiPost(reqReport).then((data) => {
        this.loading = false;
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.tableData = resReport.data.records;
          this.total = resReport.data.total;
        }
      });
    },

    typeFilter(a, b, c) {
      if (c == 1) {
        return "在职";
      } else if (c == 2) {
        return "试用";
      } else if (c == 3) {
        return "离职";
      }
    },

    dateFilter(a, b, c) {
      if (c) {
        return base.timeSwitch(c);
      }
    },
    sexFilter(a, b, c) {
      if (c == 1) {
        return "男";
      } else if (c == 2) {
        return "女";
      } else {
        return "未知";
      }
    },
    typeFormatter(a, b, c) {
      if (c == 0) {
        return "值";
      } else {
        return "比例";
      }
    },
    valueFormatter(a, b, c) {
      if (c) {
        return c + "%";
      } else {
        return "-";
      }
    },
    areaCodeFormatter(a, b, c) {
      for (let index = 0; index < this.addressOptions.length; index++) {
        if (this.addressOptions[index].areaCode == c) {
          return this.addressOptions[index].areaName;
        }
      }
    },
    typeFormatter(a, b, c) {
      if (c == 0) {
        return "值";
      } else {
        return "比例";
      }
    },
    dateFilter(a, b, c) {
      if (c) {
        return base.timeSwitch(c);
      }
    },
    isPayFundFormatter(a, b, c) {
      if (c == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    registerTypeFilter(a, b, c) {
      if (c == 1) {
        return "本地城镇";
      } else if (c == 2) {
        return "本地农村";
      } else if (c == 3) {
        return "外地城镇";
      } else if (c == 4) {
        return "外地农村";
      } else if (c == 5) {
        return "外籍人员";
      }
    },
    baseFilter(a, b, c) {
      if (c > 0) {
        return c;
      } else {
        return c;
      }
    },
    valueFormatter(a, b, c) {
      if (c) {
        return c + "%";
      } else {
        return "-";
      }
    },
    censusFormatter(a, b, c) {
      if (c) {
        return base.censusType(c);
      } else {
        return "-";
      }
    },
    //审核结果 0未审核；1；2审核不通过
    auditStatusFormatter(a, b, c) {
      if (c == 0) {
        return "未审核";
      } else if (c == 1) {
        return "通过";
      } else if (c == 2) {
        return "不通过";
      }
    },
  },
  components: {
    downloadExcel: JsonExcel,
  },
  created() {
    //获取路由参数
    if (Object.keys(this.$route.query).length > 0) {
      let query = this.$route.query;
      let that = this;
      for (const key in query) {
        if (Object.hasOwnProperty.call(query, key)) {
          const element = query[key];
          if (key == "pageSize" || key == "current" || key == "sex") {
            that[key] = base.strToNumber(element);
          } else {
            if (key == "jobFirstTimeStart" || key == "jobFirstTimeEnd") {
              if (key == "jobFirstTimeStart" && element) {
                that.time.splice(0, 1, element);
              }
              if (key == "jobFirstTimeEnd" && element) {
                that.time.splice(1, 1, element);
              }
            } else {
              that[key] = element;
            }
          }
        }
      }
    }

    this.getTab();
    this.getData();
    this.getAddress();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  font-size: 20px;
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.header .iconadd1 {
  float: right;
  font-size: 14px;
  color: #13cb6e;
  cursor: pointer;
}
.opt-user {
  padding: 20px 15px;
}
.opt-user > section {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.opt-user i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
.opt-user .iconadd1 {
  color: #13cb6e;
}
.opt-user .iconbiaoge-xiazai {
  color: #33ac37;
}
.add-user:hover {
  color: #13cb6e;
}
.input-user:hover {
  color: #33ac37;
}
.opt-t {
  margin: 20px 15px;
}
.opt-t > div {
  display: inline-block;
  min-width: 90px;
  width: auto;
  height: 70px;
  padding: 10px;
  color: #666;
  text-align: center;
  margin-right: 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.opt-t .number {
  color: #333;
  font-size: 20px;
  font-weight: bold;
}
.opt-t > div:hover .number {
  color: #13cb6e;
}
.active {
  background-color: #eee;
  border-radius: 4px;
}
.search-box {
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.search-box i {
  margin-left: 15px;
  vertical-align: middle;
}
.search-box .search {
  display: inline-block;
  width: calc(100% - 380px);
}
.search-box .btn {
  position: relative;
  display: inline-block;
}
.btn .el-button {
  padding: 0;
  height: 40px;
  width: 70px;
}
.export-excel-wrapper {
  height: 40px;
  line-height: 40px;
}
.search-box .option {
  display: inline-block;
  margin-left: 15px;
}
.search-box .el-select {
  width: 150px;
}
.search-box .el-select input {
  min-width: 100px;
  background-color: #eee;
}
.search-box .batchChange {
  display: inline-block;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}
i {
  font-size: 16px;
  color: #999;
}
.table {
  border-top: 1px solid #eee;
}
.output {
  display: inline-block;
  width: 70px;
  height: 30px;
  margin: 10px 30px;
  background-color: #13cb6e;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}
.opt-data p {
  color: #999;
  padding: 10px 30px;
  font-size: 14px;
}
.el-form-item {
  text-align: center;
}
</style>
